<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        
        body {
            height: 2000px;
        }
        /*图片start*/
        
        #wrap {
            margin: 100px auto;
            width: 490px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }
        
        ul li {
            width: 490px;
            height: 170px;
        }
        /*图片 end*/
        /*数字start*/
        
        #list {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        #list li {
            float: left;
            background-color: #f90;
            color: #fff;
            font-weight: bold;
            font-size: 15px;
            height: 20px;
            line-height: 20px;
            width: 20px;
            margin-right: 1px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
        }
        
        #list .on {
            background: pink;
            color: blue;
        }
        /*两侧导航栏*/
        
        a {
            position: absolute;
            width: 20px;
            height: 30px;
            line-height: 30px;
            top: 50%;
            margin-top: -15px;
            background: rgba(0, 0, 0, .2);
            text-decoration: none;
            color: white;
            display: none;
        }
        
        .left {
            left: 0;
            /*border-top-right-radius: 15px;
			border-bottom-right-radius: 15px;
			*/
        }
        
        .right {
            right: 0;
            text-align: right;
            /*border-top-left-radius: 15px;
		 	border-bottom-left-radius: 15px;*/
        }
        
        #wrap:hover a {
            display: block;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <!-- 图片 -->
        <ul>
            <li><img src="images/01.jpg"></li>
            <li><img src="images/02.jpg"></li>
            <li><img src="images/03.jpg"></li>
            <li><img src="images/04.jpg"></li>
            <li><img src="images/05.jpg"></li>
        </ul>
        <!-- 数字 -->
        <ol id="list" type="a">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <!-- 两侧导航栏 -->
        <a href="#" class="left">
			&lt;
		</a>
        <a href="#" class="right">
			&gt;
		</a>
    </div>

    <script type="text/javascript">
        var div = document.querySelector('div'),
            ul = document.querySelector('ul'),
            list = document.querySelector('#list'),
            lis = list.querySelectorAll('li'),
            left = document.querySelector('.left'),
            right = document.querySelector('.right'),
            index = 0,
            timer = null;
        // 自动轮播
        function auto() {
            timer = setInterval(function() {
                index++;
                if (index >= lis.length) {
                    index = 0;
                }
                change(index)
            }, 2000)
        }
        auto();
        // 轮播函数，切换图片，切换圆点
        function change(curIndex) {
            // ul偏移距离，切换图片，改变ul上边距实现图片切换效果
            ul.style.marginTop = -170 * curIndex + "px";
            // 排他思想，切换圆点，让当前圆点添加on类名
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
            }
            lis[curIndex].className = "on";
            //更新索引
            index = curIndex;
        }
        div.onmouseover = function() {
                ul.style.cursor = "pointer";
                // 鼠标移动到轮播区域时停止轮播
                clearInterval(timer);
            }
            // 离开时开启自动轮播
        div.onmouseout = auto;
        // 鼠标滑动到圆点对应id上时，切换到对应图片
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onmouseover = function() {
                change(this.index);
            }
        }

        var num = 0;
        var circle = 0;
        // 右侧按钮
        right.addEventListener('click', function() {
            if (num == ul.children.length - 1) {
                ul.style.marginTop = 0;
                num = 0;
            }
            ul.style.marginTop = -170 * num + "px";
            num++;
            // 点击右侧按钮圆点跟着变化
            circle++;
            console.log(ul.children.length);
            if (index == ul.children.length - 1) {
                circle = 0;
            }
            change(circle);
        });

        // 左侧按钮
        // 右侧按钮
        left.addEventListener('click', function() {
            if (num == 0) {
                ul.style.marginTop = -170 * num + "px";
                num = ul.children.length - 1;
            }
            ul.style.marginTop = -170 * num + "px";
            num--;
            // 点击右侧按钮圆点跟着变化
            circle--;
            // console.log(ul.children.length);
            if (index == 0) {
                circle = ul.children.length - 1;
            }
            change(circle);
        })
    </script>
</body>

</html>